<template>
	<view class="content">
		<view class="positioning">
			<view class="left">
				<text>东莞东城区</text>
				<u-icon name="arrow-down-fill" size="16"></u-icon>
			</view>
			<view class="right">
				<u-icon name="question-circle" size="30"></u-icon>
				<text>28°C</text>
			</view>
		</view>
		<view class="parking-info">
			<view class="info-title">
				<view class="tit">
				</view>
				<text>车位信息</text>
			</view>
			<view class="describe">
				<text>车场名称</text>
				<view class="area">
					<u-input v-model="spaceName" type="text" :clearable="false" placeholder='请选择车场'
						placeholder-style="font-size:'28rpx'" :custom-style="inputSty" />
					<u-icon name="arrow-right" style="margin-left: 16rpx;" size="32" @click="sure"></u-icon>
				</view>
			</view>

			<view class="describe">
				<text>车位楼层</text>
				<view class="">
					<u-input v-model="storey" type="text" :clearable="false" placeholder='请填写楼层'
						placeholder-style="font-size:'28rpx'" :custom-style="numSty" />
				</view>

			</view>
			<view class="describe">
				<text>车位编号</text>
				<view class="">
					<u-input v-model="value2" type="text" :clearable="false" placeholder='请填写车位号'
						placeholder-style="font-size:'28rpx'" :custom-style="villageSty" />
				</view>

			</view>
			<view class="upImg" style="margin: 40rpx 24rpx;">
				<text>车位照片</text>
				<text class="format">只支持jpg. png格式</text>
				<u-upload style="margin-top: 24rpx;" :action="action" :file-list="fileList" upload-text="上传照片">
				</u-upload>
			</view>
			<view class="info-title">
				<view class="tit">
				</view>
				<text>业主信息</text>
			</view>
			<view class="describe">
				<text>业主姓名</text>
				<view class="">
					<u-input v-model="carName" type="text" :clearable="false" placeholder='请填写姓名'
						placeholder-style="font-size:'28rpx'" :custom-style="nameSty" />
				</view>

			</view>
			<view class="describe">
				<text>联系方式</text>
				<view class="">
					<u-input v-model="value" type="text" :clearable="false" placeholder='请填写联系方式'
						placeholder-style="font-size:'28rpx'" :custom-style="numberSty" />
				</view>

			</view>
			<view class="upImg" id="code" style="margin: 40rpx 24rpx;">
				<view style="margin-bottom: 40rpx;">身份证头像面</view>
				<u-upload :custom-btn="true" :maxCount="1">
					<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
						<view class="center">
							<view class="iconSty">
								<u-icon name="plus" size="60" color="#fff"></u-icon>
							</view>
							<view style="color: #1677FE;margin-top: 24rpx">上传身份证正面</view>
						</view>
					</view>
				</u-upload>

			</view>
			<view class="upImg" id="code" style="margin: 40rpx 24rpx;">
				<view style="margin-bottom: 40rpx;">身份证国徽面</view>
				<u-upload :custom-btn="true" :maxCount="1">
					<view slot="addBtn" class="slot-backbtn" hover-class="slot-btn__hover" hover-stay-time="150">
						<view class="center">
							<view class="iconSty">
								<u-icon name="plus" size="60" color="#fff"></u-icon>
							</view>
							<view style="color: #1677FE;margin-top: 24rpx">上传身份证反面</view>
						</view>
					</view>
				</u-upload>

			</view>
			<view class="upImg" style="margin: 40rpx 24rpx;">
				<text>产权证</text>
				<u-upload style="margin-top: 24rpx;" :action="action" :file-list="fileList" upload-text="上传照片">
				</u-upload>
			</view>
		</view>
		<u-button :custom-style="Style" >提交审核</u-button>
		<u-popup v-model="show" mode="bottom" border-radius="24" :closeable="true">
			<view class="popup">
				<view class="title">选择停车场</view>
				<view class="sure">
					<view class="sureInfo" v-for="item in dataList" :key="item.id" @click="spaceClick(item.parkingName)">
						<view class="parkingTitle">
							<text style="font-weight: 700;
font-size: 32rpx;
color: #333333;">{{item.parkingName}}</text>
							<view style="font-size: 24rpx;
color: #999999;">{{item.distanceText}}</view>
						</view>
						<view style="margin-top: 24rpx;">
							<u-icon name="map" size="24"></u-icon>
							<text style="margin-left: 8rpx;">{{item.address}}</text>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList:[],
				spaceName: '',
				value1: '',
				value2: '',
				carName: '',
				inputSty: {
					textAlign:'right'
				},
				numSty: {
					textAlign:'right'
				},
				villageSty: {
					textAlign:'right'
				},
				nameSty: {
					textAlign:'right'
				},
				numberSty: {
					textAlign:'right'
				},
				Style: {
					fontSize: '32rpx',
					borderRadius: '16rpx',
					background: '#1677FE',
					height: '100rpx',
					margin: '100rpx 55rpx',
					color: "#fff"
				},
				// 上传地址
				action: 'http://119.96.191.80:4097',
				fileList: [{
					url: '',
				}],
				show:false
			}
		},
		methods: {
			sure() {
				this.show = true
				let openId = uni.getStorageSync("userInfo").openid;
				let payload = {
					...this.searchParam,
					openid: openId,
					// longitude: uni.getStorageSync('location').longitude,
					longitude: "116.19252",
					// latitude: uni.getStorageSync('location').latitude,
					latitude: "23.36919",
				
				};
				this.$Api.getParkingLotList(payload).then((res) => {
					wx.stopPullDownRefresh()
					this.dataList = res.data.dataList;
				});
			},
			spaceClick(name){
				console.log(name)
				this.spaceName=name
				this.show=false
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding-bottom: 100rpx;
		.positioning {
			padding: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 24rpx;

			.left {
				text {
					margin-right: 16rpx;
				}
			}

			.right {
				text {
					margin-left: 16rpx;
				}
			}
		}

		.parking-info {
			font-size: 28rpx;
			line-height: 1;

			.info-title {
				color: #1677FE;
				font-weight: 700;
				background: #F6F9FC;
				padding: 20rpx 0;
				display: flex;
				align-items: center;
				margin-left: 24rpx;

				.tit {
					width: 6rpx;
					height: 26rpx;
					background: #1677FE;
					margin-right: 16rpx;
				}
			}
		}

		.describe {
			padding: 24rpx;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #D8D8D8;

			.area {
				display: flex;
			}

			text {
				display: block;
			}

		}

		.detail {
			border-bottom: 1rpx solid #D8D8D8;
			margin-bottom: 40rpx;
		}

		.upImg {
			margin-bottom: 40rpx;
			padding-bottom: 40rpx;
		}

		.format {
			font-size: 24rpx;
			color: #999999;
			margin-left: 24rpx;
		}
	}

	.center {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.iconSty {
		width: 76rpx;
		height: 76rpx;
		border-radius: 50%;
		background-color: #1677FE;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.slot-btn {
		width: 702rpx;
		height: 444rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
		background-image: url(../../static/shareParking/sfzzm.png);
		background-size: cover;
	}

	.slot-backbtn {
		width: 702rpx;
		height: 444rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
		background-image: url(../../static/shareParking/sfzfm.png);
		background-size: cover;

	}

	.slot-btn__hover {
		background-color: rgb(235, 236, 238);
	}


	.popup {
		padding: 40rpx 24rpx;

		.title {
			font-weight: 700;
			font-size: 32rpx;
			color: #333333;
			border-bottom: 1rpx solid #e6e6e6;
			padding-bottom: 40rpx;

		}

		.sure {
			margin-top: 40rpx;

			.sureInfo {

				border: 1rpx solid #CCCCCC;
				box-shadow: 0 6rpx 20rpx 0 #99999933;
				border-radius: 16rpx;
				padding: 24rpx;
				margin-bottom: 24rpx;

				.parkingTitle {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}
		}

	}
	
	/deep/ #code .u-preview-wrap{
	    width: 702rpx !important;
	    height: 444rpx !important;
		}
</style>